<template>
  <uni-nav-bar title="司机价" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">{{TeamInfo.KeyCustom.name}}</view>
  <view class="package">
    <view class="space-between"><text>司机价</text>
      <uni-icons type="plus-filled" size="30" color="#2694FB" @click="increase()"></uni-icons>
    </view>
    <view class="price">
      <view v-for="(item,index) in price" :key='index'>
        {{item.price}}<text style="font-size: 26rpx;"> 元/公斤</text>
        <uni-icons type="clear" size="30" color="#eee" style="position:absolute;right:-20rpx;top:-20rpx"
          @click="delPrice(item.id)"></uni-icons>
      </view>
    </view>
  </view>
  <view class="add" @click="NextStep()" v-if="type!='add'">下一步</view>
  <!-- 填写司机价 -->
  <Price @submit="submit" ref="AddPrice"></Price>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import Price from '@c/administrator/BulletBox/price.vue';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { onLoad } from '@dcloudio/uni-app';
  import { ref } from 'vue';
  import { getCustomersPrice } from '@/gql/administrator';
  import { information } from '@/stores/administrator';
  const TeamInfo = information();
  /**
    * 司机价
    * @param {Array} price  司机价列表
    * @param {Null} AddPrice  填写司机价弹框
    * @param {Number} type  运营商ID
    * @param {String} address_city  地区信息
    * @return
    */
  const price = ref([])
  const AddPrice = ref(null)
  const type = ref()
  const keyID = ref('')
  onLoad((pearm) => {
    keyID.value = pearm.id
    TeamInfo.geKeyIn(pearm.id)
    type.value = pearm.type
    init()
  })
  function increase() {
    AddPrice.value.openBankPad()
  }
  // 填写司机价
  function submit(num : number) {
    showLoading('正在提交');
    const payload = {
      customers_id: Number(keyID.value),
      price: num
    };
    toPublish('control/addCustomersPrice', payload, (obj : any) => {
      const { code, msg } = obj;
      if (code === 1) {
        successToast('提交成功');
        init()
      } else {
        errorToast(msg);
      }
    });
  }
  //获取大客户司机价
  function init() {
    showLoading('');
    const payload = {
      query: getCustomersPrice,
      variables: { customers_id: Number(keyID.value) },
    };
    toPublish('ql/control/getCustomersPrice', payload, (obj : any) => {
      const { getCustomersPrice } = obj.data;
      price.value = getCustomersPrice
    });
  }
  // 删除司机价
  function delPrice(id : number) {
    showLoading('正在提交');
    const payload = {
      customers_id: Number(keyID.value),
      id
    };
    toPublish('control/delCustomersPrice', payload, (obj : any) => {
      const { code, msg } = obj;
      if (code === 1) {
        successToast('删除成功');
        init()
      } else {
        errorToast(msg);
      }
    });
  }
  //添加司机价
  function NextStep() {
    if (!price.value) {
      errorToast('请填写司机价')
      return
    } else {
      navTo('administrator/keyaccount/addPriceL?id=' + keyID.value)
    }
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 40rpx auto 20rpx;
    font-size: 32rpx;
  }

  .price {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    view {
      width: 180rpx;
      height: 56rpx;
      text-align: center;
      line-height: 56rpx;
      background: #2694FB;
      background: #2C96F9;
      color: #fff;
      border-radius: 5px;
      margin: 15rpx;
      position: relative;
    }
  }
</style>